<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较大小-computed实现</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <!-- 
        1.computed和watch如果都可以完成某个功能，优先选择computed
        2.有一种情况下，必须使用watch，computd无有法完成！
    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        数字1：<input type='text' v-model="num1" /> <br />
        数字2：<input type='text' v-model="num2" /> <br />
        比较大小：{{compareResult}}

    </div>

    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '比较大小-computed实现',
                num1: 0,
                num2: 0,
            },
            computed: {
                //计算属性的简写方式
                compareResult() {
                    let result = this.num1 - this.num2

                    if (result == 0) {
                        return this.compareResult = this.num1 + '=' + this.num2
                    } else if (result > 0) {
                        return this.compareResult = this.num1 + '>' + this.num2
                    } else {
                        return this.compareResult = this.num1 + '<' + this.num2
                    }
                },
                //采用异步的时候，值修改后3s在执行，因为有return的存在，无法完成了（失效了）
                //但是watch没有返回值，则可以使用
                // compareResult() {
                //     let result = this.num1 - this.num2

                //     //采用异步的时候，这里的箭头函数是js引擎去调用。所以最终return的时候，也会将值返回给js引擎
                //     setTimeout(() => {
                //         if (result == 0) {
                //             return this.compareResult = this.num1 + '=' + this.num2
                //         } else if (result > 0) {
                //             return this.compareResult = this.num1 + '>' + this.num2
                //         } else {
                //             return this.compareResult = this.num1 + '<' + this.num2
                //         }
                //     }, 3000)

                // }
            }
        })
    </script>


</body>


</html>